<link href="__MODULE_STATIC__/tree/tree.css" type="text/css" rel="stylesheet">
<ul id="files" style="display: none;">
    <volist name="book.tree" id="book_tree">
        <php>if($book_tree['type']==0){</php>
        <li aria-expanded="false" <eq name="book_tree.open_child" value="1">data-role="default-open"</eq>>
            <a href="javascript:void(0);" class="tree-parent tree-parent-collapsed"></a>
            <a data-role="book_section" data-id="{$book_tree['id']}" style="margin-left: 29px;color:{$book_tree['color']};">{$book_tree['title']}</a>
            <ul class="child_ul">
                {:W('Book/ChildTree/render',array(array('pid'=>$book_tree['id'],'book_id'=>$book_tree['book_id'])))}
            </ul>
        </li>
        <php>}else{</php>
        <li>
            <a href="javascript:void(0);" class="tree-file" data-role="book_section" data-id="{$book_tree['id']}" style="color:{$book_tree['color']};">{$book_tree['title']}</a>
        </li>
        <php>}</php>
    </volist>
</ul>

<script type="text/javascript" src="__MODULE_STATIC__/tree/jquery.tree.js"></script>
<script>
    $(function(){
        $('#files').tree({
            expanded: 'li:first'
        });
        $('#files').show();
    });
</script>